import * as Cesium from 'cesium';

export default class {
  constructor(viewer) {
    // 动态创建一个div，并添加固定定位样式
    // 创建一个新的div元素
    var div = document.createElement('div');

    // 设置id
    div.id = 'mouse-position';

    // 添加样式
    div.style.position = 'fixed'; // 设置定位为固定
    div.style.bottom = '0px'; // 设置距离顶部的距离
    div.style.right = '0'; // 设置距离左边的距离
    div.style.width = '200px'; // 设置宽度
    div.style.height = '20px'; // 设置高度
    div.style.backgroundColor = 'rgba(0,0,0,0.3)'; // 设置背景颜色
    div.style.color = '#fff'; // 设置背景颜色
    div.style.fontSize = '14px'; // 设置背景颜色
    div.style.lineHeight = '20px'; // 设置背景颜色
    div.style.textAlign = 'center'; // 设置背景颜色
    div.style.zIndex = 100; // 设置背景颜色

    // 将新创建的div添加到body中
    document.body.appendChild(div);
    // 监听鼠标移动事件
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction((movement) => {
      // 获取鼠标的坐标
      // console.log('movement: ' + movement.endPosition);
      const cartesian = viewer.camera.pickEllipsoid(
        movement.endPosition,
        viewer.scene.globe.ellipsoid
      );
      if (cartesian) {
        // 使用Cesium.Ellipsoid.WGS84将笛卡尔坐标转换为地理坐标
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);

        // 使用Cesium.Cartographic.toDegrees将地理坐标转换为经纬度
        var longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
          2
        );
        var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
        const heightString = cartographic.height;
        // console.log(
        //   `经度: ${longitude} 纬度: ${latitude} 高度: ${heightString}`
        // );
        document.getElementById(
          'mouse-position'
        ).innerHTML = `经度: ${longitude} 纬度: ${latitude}`;
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 鼠标移动的参数 和点击事件的参数不同
    // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }
}
